<template>
  <el-dialog
    v-model="store.isVisible"
    :title="t('Config editor')"
    width="1200px"
    @close="store.hide()"
  >
    <el-row :gutter="8">
      <!-- 左侧配置列表 -->
      <el-col :span="6">
        <el-row>
          <el-col :span="24">
            <el-input
              v-model="store.searchKey"
              :placeholder="t('Search')"
              spellcheck="false"
            />
          </el-col>
        </el-row>
        
        <!-- 状态筛选 -->
        <el-row style="margin-left: 16px;">
          <el-col :span="12">
            <el-checkbox v-model="store.filterOK">
              {{ t('OK') }}
            </el-checkbox>
          </el-col>
          <el-col :span="12">
            <el-checkbox v-model="store.filterDisabled">
              {{ t('Disabled') }}
            </el-checkbox>
          </el-col>
          <el-col :span="12">
            <el-checkbox v-model="store.filterError">
              {{ t('Error') }}
            </el-checkbox>
          </el-col>
          <el-col :span="12">
            <el-checkbox v-model="store.filterWarning">
              {{ t('Warning') }}
            </el-checkbox>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="24">
            <el-scrollbar height="472px">
              <el-menu
                :default-active="store.selectedConfigId"
                @select="store.selectConfig"
                style="border: none;"
              >
                <el-menu-item
                  v-for="config in store.filteredConfigList"
                  :key="config.id"
                  :index="config.id"
                  class="config-item"
                >
                  {{ config.name }}
                </el-menu-item>
              </el-menu>
            </el-scrollbar>
          </el-col>
        </el-row>
      </el-col>
      
      <!-- 右侧内容区域 -->
      <el-col :span="18">
        <el-card>
          <el-tabs v-model="activeTab">
            <!-- Edit 标签页 -->
            <el-tab-pane :label="t('Edit')" name="edit">
              <!-- 状态信息 -->
              <el-row :gutter="8">
                <el-col :span="24">
                  <el-row :gutter="8">
                    <el-col :span="3">
                      <label>{{ t('Main status') }}:</label>
                    </el-col>
                    <el-col :span="21">
                      <el-text 
                        :style="{ color: getStatusColor(store.mainStatus?.[0]) }"
                      >
                        {{ getStatusText(store.mainStatus?.[0]) }}
                        <span v-if="store.mainStatus?.[1]">
                          ({{ store.mainStatus[1] }})
                        </span>
                      </el-text>
                    </el-col>
                  </el-row>
                  <el-row :gutter="8">
                    <el-col :span="3">
                      <label>{{ t('Child status') }}:</label>
                    </el-col>
                    <el-col :span="21">
                      <el-text>{{ getChildStatusText(store.childStatus) }}</el-text>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>

              <!-- 编辑区域 -->
              <el-input
                type="textarea"
                v-model="store.config"
                :disabled="!store.isEditing"
                :rows="20"
                resize="none"
                spellcheck="false"
              />
            </el-tab-pane>

            <!-- Details 标签页 -->
            <el-tab-pane :label="t('Details')" name="details" style="height: 491px;">
              <el-row :gutter="16">
                <!-- 左列 -->
                <el-col :span="12">
                  <!-- Output Samples -->
                  <el-row :gutter="8">
                    <el-col :span="24">
                      <label>{{ t('Output Samples') }}</label>
                    </el-col>
                    <el-col :span="24">
                      <el-input
                        type="textarea"
                        :model-value="getOutputSamplesText()"
                        :rows="6"
                        readonly
                        resize="none"
                        spellcheck="false"
                      />
                    </el-col>
                  </el-row>

                  <!-- Output Signals -->
                  <el-row :gutter="8">
                    <el-col :span="24">
                      <label>{{ t('Output Signals') }}</label>
                    </el-col>
                    <el-col :span="24">
                      <el-input
                        type="textarea"
                        :model-value="getOutputSignalsText()"
                        :rows="6"
                        readonly
                        resize="none"
                        spellcheck="false"
                      />
                    </el-col>
                  </el-row>

                  <!-- Output Reports -->
                  <el-row :gutter="8">
                    <el-col :span="24">
                      <label>{{ t('Output Reports') }}</label>
                    </el-col>
                    <el-col :span="24">
                      <el-input
                        type="textarea"
                        :model-value="getOutputReportsText()"
                        :rows="6"
                        readonly
                        resize="none"
                        spellcheck="false"
                      />
                    </el-col>
                  </el-row>
                </el-col>

                <!-- 右列 -->
                <el-col :span="12">
                  <!-- Output Scenarios -->
                  <el-row :gutter="8">
                    <el-col :span="24">
                      <label>{{ t('Output Scenarios') }}</label>
                    </el-col>
                    <el-col :span="24">
                      <el-input
                        type="textarea"
                        :model-value="getOutputScenariosText()"
                        :rows="4"
                        readonly
                        resize="none"
                        spellcheck="false"
                      />
                    </el-col>
                  </el-row>

                  <!-- Required Signal Packings -->
                  <el-row :gutter="8">
                    <el-col :span="24">
                      <label>{{ t('Required Signal Packings') }}</label>
                    </el-col>
                    <el-col :span="24">
                      <el-input
                        type="textarea"
                        :model-value="getRequiredSignalPackingsText()"
                        :rows="4"
                        readonly
                        resize="none"
                        spellcheck="false"
                      />
                    </el-col>
                  </el-row>

                  <!-- Required Video Channels -->
                  <el-row :gutter="8">
                    <el-col :span="24">
                      <label>{{ t('Required Video Channels') }}</label>
                    </el-col>
                    <el-col :span="24">
                      <el-input
                        type="textarea"
                        :model-value="getRequiredVideoChannelsText()"
                        :rows="4"
                        readonly
                        resize="none"
                        spellcheck="false"
                      />
                    </el-col>
                  </el-row>

                  <!-- Required Data Types -->
                  <el-row :gutter="8">
                    <el-col :span="24">
                      <label>{{ t('Required Data Types (For Recording)') }}</label>
                    </el-col>
                    <el-col :span="24">
                      <el-input
                        type="textarea"
                        :model-value="getRequiredDataTypesText()"
                        :rows="4"
                        readonly
                        resize="none"
                        spellcheck="false"
                      />
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <!-- Footer 按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button 
          :disabled="!store.canDisable"
          @click="store.disableConfig()"
        >
          {{ t('Disable') }}
        </el-button>
        <el-button 
          :disabled="!store.canEnable"
          @click="store.enableConfig()"
        >
          {{ t('Enable') }}
        </el-button>
        <el-button 
          :disabled="!store.canEdit || store.isEditing"
          @click="store.isEditing = true"
        >
          {{ t('Edit') }}
        </el-button>
        <el-button 
          type="primary"
          :disabled="!store.canSave"
          @click="store.saveConfig()"
        >
          {{ t('Save') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { useConfigEditorStore } from '@/stores/configEditor'
import { useLanguageStore } from '@/stores/language'
import { isDark } from '@/utils/utility'

const store = useConfigEditorStore()
const languageStore = useLanguageStore()
const activeTab = ref('edit')

// 翻译函数
const t = (key) => {
  const translations = {
    'Config editor': {
      'en': 'Config editor',
      'zh': '配置编辑器'
    },
    'Search': {
      'en': 'Search',
      'zh': '搜索'
    },
    'Edit': {
      'en': 'Edit',
      'zh': '编辑'
    },
    'Details': {
      'en': 'Details',
      'zh': '详情'
    },
    'Main status': {
      'en': 'Main status',
      'zh': '主状态'
    },
    'Child status': {
      'en': 'Child status',
      'zh': '子状态'
    },
    'Disable': {
      'en': 'Disable',
      'zh': '禁用'
    },
    'Enable': {
      'en': 'Enable',
      'zh': '启用'
    },
    'Save': {
      'en': 'Save',
      'zh': '保存'
    },
    'Output Samples': {
      'en': 'Output Samples',
      'zh': '输出样本'
    },
    'Output Signals': {
      'en': 'Output Signals',
      'zh': '输出信号'
    },
    'Output Reports': {
      'en': 'Output Reports',
      'zh': '输出报告'
    },
    'Output Scenarios': {
      'en': 'Output Scenarios',
      'zh': '输出场景'
    },
    'Required Signal Packings': {
      'en': 'Required Signal Packings',
      'zh': '需要信号打包'
    },
    'Required Video Channels': {
      'en': 'Required Video Channels',
      'zh': '需要视频通道'
    },
    'Required Data Types (For Recording)': {
      'en': 'Required Data Types (For Recording)',
      'zh': '需要数据类型（采集用）'
    },
    'OK': {
      'en': 'OK',
      'zh': '正常'
    },
    'Error': {
      'en': 'Error',
      'zh': '错误'
    },
    'Warning': {
      'en': 'Warning',
      'zh': '警告'
    },
    "Disabled": {
      "en": "Disabled",
      "zh": "未启用"
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

// 获取状态文本
const getStatusText = (status) => {
  const isChinese = languageStore.isChinese
  switch (status) {
    case 'Disabled':
      return isChinese ? '未启用' : 'Disabled'
    case 'Enabled':
      return isChinese ? '正常' : 'OK'
    case 'EnabledWithError':
      return isChinese ? '错误' : 'Error'
    case 'EnabledWithWarning':
      return isChinese ? '警告' : 'Warning'
    default:
      return isChinese ? '未知' : 'Unknown'
  }
}

// 获取状态颜色
const getStatusColor = (status) => {
  switch (status) {
    case 'Disabled':
      return 'gray'
    case 'Enabled':
      return 'green'
    case 'EnabledWithError':
      return 'red'
    case 'EnabledWithWarning':
      return 'orange'
    default:
      return isDark ? 'white' : 'black'
  }
}

// 获取子状态文本
const getChildStatusText = (status) => {
  if (!status || !status.length) return '-'
  const statusTexts = status.map(s => getStatusText(s))
  return statusTexts.join(', ')
}

// 获取输出样本文本
const getOutputSamplesText = () => {
  if (!store.details?.outputSamples) return ''
  return Object.entries(store.details.outputSamples)
    .map(([key, value]) => `${value} (${key})`)
    .join('\n')
}

// 获取输出信号文本
const getOutputSignalsText = () => {
  if (!store.details?.outputSignals) return ''
  const lines = []
  Object.entries(store.details.outputSignals).forEach(([key, values]) => {
    values.forEach(value => {
      lines.push(key ? `${key} -> ${value}` : value)
    })
  })
  return lines.join('\n')
}

// 获取输出报告文本
const getOutputReportsText = () => {
  if (!store.details?.outputGraphs) return ''
  return store.details.outputGraphs.join('\n')
}

// 获取输出场景文本
const getOutputScenariosText = () => {
  if (!store.details?.outputScenes) return ''
  return store.details.outputScenes.join('\n')
}

// 获取需要信号打包文本
const getRequiredSignalPackingsText = () => {
  if (!store.details?.requiredSignalPackings) return ''
  return store.details.requiredSignalPackings.join('\n')
}

// 获取需要视频通道文本
const getRequiredVideoChannelsText = () => {
  if (!store.details?.requiredVideoChannels) return ''
  return store.details.requiredVideoChannels.join('\n')
}

// 获取需要数据类型文本
const getRequiredDataTypesText = () => {
  if (!store.details?.requiredRecordDataTypes) return ''
  return store.details.requiredRecordDataTypes.join('\n')
}
</script>

<style scoped>
.config-item {
  height: auto;
  line-height: 1.4;
  padding: 8px;
}
</style> 